<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/pages/common/component.jsp"%>
<%@ page import="java.util.Date" %>
<html>
<head>
<title>报表</title>

<script type="text/javascript">

// 报表参数
var properties ;
eval("properties="+'<%=objLoginUser.getProperties()%>');

var piechartOptions = 
{
	chart: {
		renderTo: '',
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false
	},
	title: {
		text: ''
	},
	subtitle: {
		text: ''
	},
	tooltip: {
		formatter: function() {
			return '<b>'+ this.point.name +'</b>'+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
		}
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return '<b>'+ this.point.name +'</b>'+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
				}
			},
			point: {
             	events : {   
                	click : function(){//绑定饼图每个子节点的click事件
						getSubPie(this.feeTypeId, this.chartType, this.name);
                   	}
            	}
          	}   
		}
	},
    series: [{
		type: 'pie',
		name: 'Browser share',
		data: [] 
		}]
};

// 多线图+柱形图
var combochartOptions = {
	chart: {
		renderTo: ''
	},
	title: {
		text: '年支出结余'
	},
	xAxis: {
		categories: []
	},
	yAxis: {
		title: {
			text: '元'
		},
		plotLines: [{ // 警戒线
			value: 0,
			width: 2,
			color: 'green',
			dashStyle: 'longdashdot'
		},
		{
			value: 0,
			width: 2,
			color: 'yellow',
			dashStyle: 'longdashdot'
		},
		{ 
			value: 0,
			width: 2,
			color: 'red',
			dashStyle: 'longdashdot'
		}],
		min:0,
		max:5000,
		tickInterval:500
	},
	tooltip: {
		formatter: function() {
			var s;
			if (this.point.name) { // the pie chart
				s = ''+
					'<b>'+ this.point.name +'</b>' +''+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
			} else {
				s = ''+
					this.x + this.series.name + ':'+ this.y;
			}
			return s;
		}
	},
	labels: {
		items: [{
			html: '结余支出比',
			style: {
				left: '0px',
				top: '-10px',
				color: 'orange'
			}
		}]
	},
	series: [],
	plotOptions: {
		spline: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return ;
				}
			},
			point: {
            	events : {   
                	click : function(){// 绑定每个子节点的click事件
                		if(this.series.name == '支出'){ // 支出节点弹出月消费记录
                			getOneMonthChart(this.category);
                		}else if(this.series.name == '收入'){ // 收入节点弹出收入分布图
                			getRevenuePieChart(this.category);
                		}else if(this.series.name == '结余'){ // 结余节点弹出收入支出分布图
                			getInPkOutPieChart(this.category);
                		}
               		}
            	}
       		}   
		},
		column: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return ;
				}
			},
			point: {
            	events : {   
                	click : function(){// 绑定每个子节点的click事件
                		if(this.series.name == '支出'){ // 支出节点弹出月消费记录
                			getOneMonthChart(this.category);
                		}else if(this.series.name == '收入'){ // 收入节点弹出收入分布图
                			getRevenuePieChart(this.category);
                		}else if(this.series.name == '结余'){ // 结余节点弹出收入支出分布图
                			getInPkOutPieChart(this.category);
                		}
               		}
            	}
       		}   
		}
	}
};

// 日期范围:一年的第一天至最后一天两个日期
var dYearIntervalDay ;

function getYearPie(){
	// 获取年消费Pie
  	$.ajax({   
	    type: "POST",
	    url: "chartAction.do",
	    data: "method=getPieChart&startDate="+dYearIntervalDay[0]+"&endDate="+dYearIntervalDay[1]+"&feeType=0&chartType=<%=Constants.CHART_TYPE_YEAR%>",
	    dataType:"json",
	    async: false,
	    cache: false,
	    success: function(json){
			piechartOptions.title.text = json.title;
			piechartOptions.subtitle.text = json.subtitle;
			piechartOptions.series[0].data = json.data;
			piechartOptions.chart.renderTo='year_pie_container';
			new Highcharts.Chart(piechartOptions);
	    },
	    error: function(msg){
	       	alert("查询数据出错!请稍后再试!");
	    }
   	});
}

function getYearCombo(){
	// 获取年消费Combo
	$.ajax({   
	    type: "POST",
	    url: "chartAction.do",
	    data: "method=getComboChart&startDate="+dYearIntervalDay[0]+"&endDate="+dYearIntervalDay[1],
	    dataType:"json",
	    async: false,
	    cache: false,
	    success: function(json){
	    	combochartOptions.chart.renderTo='year_combo_container';
	    	combochartOptions.yAxis.min=properties.monthComboChartMin;
			combochartOptions.yAxis.max=properties.monthComboChartMax;
			combochartOptions.yAxis.tickInterval=properties.monthComboChartInterval;
			// 警戒提示线
			combochartOptions.yAxis.plotLines[0].value = properties.monthComboChartPlotLine1;
			combochartOptions.yAxis.plotLines[1].value = properties.monthComboChartPlotLine2;
			combochartOptions.yAxis.plotLines[2].value = properties.monthComboChartPlotLine3;
			combochartOptions.xAxis.categories = json.categories;
	    	combochartOptions.series = json.series;
			new Highcharts.Chart(combochartOptions);
	    },
	    error: function(msg){
	       	alert("查询数据出错!请稍后再试!");
	    }
   	});
}

function getSubPie(feeTypeId, chartType, titleName){
	$('#sub_pie_container').html('');
	$("#sub_pie_container").dialog({modal:true, autoOpen:false});
	$("#sub_pie_container").dialog('option', 'title', titleName+' 细类支出');
	$("#sub_pie_container").dialog('option', 'width', 470);
	$("#sub_pie_container").dialog('option', 'height', 300);
	$("#sub_pie_container").dialog('open');
	$('#sub_pie_container').load('/venus/pages/chart/getSubPie.jsp?chartType='+chartType+'&feeTypeId='+feeTypeId+'&feeType=0&startDate='+dYearIntervalDay[0]+'&endDate='+dYearIntervalDay[1]);
}

function getOneDayPie(dayDate){
	$('#pie_container').html('');
	$("#pie_container").dialog({modal:true, autoOpen:false});
	$("#pie_container").dialog('option', 'title', dayDate+' 日支出');
	$("#pie_container").dialog('option', 'width', 470);
	$("#pie_container").dialog('option', 'height', 300);
	$("#pie_container").dialog('open');
	$('#pie_container').load('/venus/pages/chart/getPieChart.jsp?startDate='+dayDate+'&endDate='+dayDate+'&feeType=0');
}

function getOneMonthChart(monthDate){
	var dMonthIntervalDay = getMonthIntervalDay(monthDate);
	$('#onemonth_chart_container').html('');
	$("#onemonth_chart_container").dialog({modal:true, autoOpen:false});
	$("#onemonth_chart_container").dialog('option', 'title', monthDate+' 月支出');
	$("#onemonth_chart_container").dialog('option', 'width', 1050);
	$("#onemonth_chart_container").dialog('option', 'height', 400);
	$("#onemonth_chart_container").dialog('open');
	$('#onemonth_chart_container').load('/venus/pages/chart/getOneMonthChart.jsp?startDate='+dMonthIntervalDay[0]+'&endDate='+dMonthIntervalDay[1]+"&feeType=0");
}

function getRevenuePieChart(monthDate){
	var dMonthIntervalDay = getMonthIntervalDay(monthDate);
	$('#pie_container').html('');
	$("#pie_container").dialog({modal:true, autoOpen:false});
	$("#pie_container").dialog('option', 'title', monthDate+' 月收入');
	$("#pie_container").dialog('option', 'width', 470);
	$("#pie_container").dialog('option', 'height', 300);
	$("#pie_container").dialog('open');
	$('#pie_container').load('/venus/pages/chart/getPieChart.jsp?startDate='+dMonthIntervalDay[0]+'&endDate='+dMonthIntervalDay[1]+'&feeType=1');
}

function getInPkOutPieChart(monthDate){
	var dMonthIntervalDay = getMonthIntervalDay(monthDate);
	$('#pie_container').html('');
	$("#pie_container").dialog({modal:true, autoOpen:false});
	$("#pie_container").dialog('option', 'title', monthDate+' 月收支比');
	$("#pie_container").dialog('option', 'width', 470);
	$("#pie_container").dialog('option', 'height', 300);
	$("#pie_container").dialog('open');
	$('#pie_container').load('/venus/pages/chart/getInPkOutPieChart.jsp?startDate='+dMonthIntervalDay[0]+'&endDate='+dMonthIntervalDay[1]);
}

$(document).ready(function(){
	configDate('yearDate', '<fmt:formatDate value="<%=new Date() %>" pattern="yyyy" type="date"/>', 'yy');
	// 给年报表的标题赋值
	combochartOptions.title.text = $("#yearDate").val()+'年结余支出比';;
	// 初始日期范围为当年
	dYearIntervalDay = getYearIntervalDay('<fmt:formatDate value="<%=new Date() %>" pattern="yyyy" type="date"/>');
	
	getYearPie();
	getYearCombo();
});

function changeYear(year){
	// 重新定义日期范围
	dYearIntervalDay = getYearIntervalDay(year);
	// 给年报表的标题赋值
	combochartOptions.title.text = year+'年结余支出比';
	
	getYearPie();
	getYearCombo();
}
</script>
</head>
<body>
<table width='98%'  border='0' cellpadding='1' cellspacing='1' bgcolor='#CBD8AC' align="center" style="margin-top:8px; text-align: center;">
 <tr>
  <th colspan="2" align="center">
  	年份:<input id="yearDate" name="yearDate" readonly="readonly" style='width:80px;' onchange="changeYear(this.value)"/>&nbsp;&nbsp;&nbsp;
  </th>
 </tr>
</table>
<div id="year_pie_container" style="width: 500px; height: 250px; margin: 0 auto"></div>

<div id="year_combo_container" style="width: 1000px; height: 300px; margin: 0 auto"></div>
	
<div id="sub_pie_container" style="width: 450px; height: 250px; margin: 0 auto"></div>
<div id="pie_container" style="width: 450px; height: 250px; margin: 0 auto"></div>
<div id="onemonth_chart_container" style="width: 750px; height: 250px; margin: 0 auto"></div>

</body>
</html>